<template>
  <div id="hheader">
    <!-- 左侧 -->
    <div class="hheader-left" @click="goBack()" v-show="mheader.showBack">
      <button class="iconfont icon-xxx"></button>
    </div>
    <!-- 标题 -->
    <div class="hheader-main">{{mheader.title}}</div>
    <!-- 右侧 -->
    <a class="hheader-right" @click="rightClick()">
      <slot name="rightContent"></slot>
    </a>
  </div>
</template>

<script>
export default {
    name: "hHeader",
    props: {
        mheader: {
            type: Object,
            default: {
                title: "", //顶部的标题
                showBack: false, //是否显示后退图标
                toUrl: "", //右侧跳转的URL
                rightContent: "" //右侧的内容，可以是图标也可以是文字
            } //这样可以指定默认的值
        }
    },
    data() {
        return {};
    },
    mounted() {},
    methods: {
        //后退
        goBack() {
            this.$router.go(-1);
        },
        //点击右侧
        rightClick() {
            if (this.mheader.toUrl) {
                this.$router.push(this.mheader.toUrl);
            }
        }
    },
    components: {},
    computed: {}, // 计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值
    watch: {},
    filters: {}
};
</script>

<style lang="scss">
#hheader {
    position: fixed;
    width: 100%;
    height: rem(88);
    background-color: $color;
    z-index: 100;
    .hheader-left {
        position: absolute;
        left: 0;
        top: 0;
        button {
            display: block;
            text-align: center;
            width: rem(120);
            color: white;
            height: rem(88);
            line-height: rem(88);
            border: 0;
            background-color: transparent;
        }
    }
    .hheader-main {
        width: rem(280);
        margin: 0 auto;
        height: rem(88);
        line-height: rem(88);
        color: white;
        text-align: center;
        font-size: rem(36);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        sub {
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
    .hheader-right {
        position: absolute;
        right: 10px;
        top: 0;
        height: rem(88);
        line-height: rem(88);
        color: white;
        font-size: rem(28);
    }
    .hheader-footer {
        padding: rem(15) 0 0;
        width: 100%;
        background-color: white;
    }
}
</style>
